<template>
  <view class="layout buy-record">
    <scroll-view scroll-y v-if="lists.length > 0" @scrolltolower="onMore">
      <view class="order-panel" v-for="(item, index) in lists" :key="index">
        <order-item
          :thumb="(item.good && item.good.thumb) ? item.good.thumb[0].url : ''"
          :title="item.productName"
          :price="item.price"
          :status="item.status"
          :amount="item.amount"
          @click="go('/pages/shop/orderRecord/detail?id=' + item.id)"
        ></order-item>
      </view>
    </scroll-view>
    <scroll-view class="none" v-else><view class="">暂无订单</view></scroll-view>
  </view>
</template>

<script>
import baseMixins from "@/utils/mixins";
// 组件
import orderItem from "@/components/shop/orderItem";
let page = 1,
  size = 10;
export default {
  mixins: [baseMixins],
  components: {
    orderItem
  },
  data() {
    return {
      lists: [],
      total: 0
    };
  },
  onLoad() {
    page = 1;
    this.init();
  },
  methods: {
    init() {
      return this.$api.good.orderList(page, size).then(_ => {
        this.lists = [...this.lists, ..._.data.data.list];
        this.total = _.data.data.total;
        return _;
      });
    },
    onMore() {
      if (this.lists.length >= this.total) {
        return false;
      }
      page++;
      this.init();
    }
  },
  onPullDownRefresh() {
    this.lists = [];
    this.init().then(() => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.buy-record {
  height: 100%;
  width: 100%;
  scroll-view {
    height: 100%;
    width: 100%;
    &.none {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      view {
        width: 100%;
        height: 100upx;
        line-height: 100upx;
      }
    }
  }
}
.order-panel {
  padding: 10upx 20upx;
  .panel-title {
    padding: 10upx 0;
  }
}
</style>
